<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .round {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 圆角 */
            border-radius: 50%;
        }

        .rectangle {
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 10px;
        }

        .free {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 复合写法 左上右下顺时针 */
            border-radius: 10px 50px 100px 150px;
        }

        /* 盒子的阴影 */
        .shadow {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* box-shadow:h-shadow v-shadow blur spread color inset */
            /*
                h-shadow 必需。水平阴影的位置。允许负值。
                v-shadow 必需。垂直阴影的位置。允许负值。
                blur 可选。模糊距离。
                spread 可选。阴影的尺寸。
                color 可选。阴影的颜色。请参阅CSS颜色值。
                inset 可选。将外部阴影(outset)改为内部阴影。
             */
            box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, .3) ;
        }

        .shadow2 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .shadow2:hover {
            box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, .3) ;
        }
        .shadowtext {
            font-size: 30px;
            color: pink;
            font-size: 700;
            /* text-shadow: :h-shadow v-shadow blur color */
            /* 
            h-shadow 必需。水平阴影的位置。允许负值。
            v-shadow 必需。垂直阴影的位置。允许负值。
            blur 可选。模糊距离。
            color 可选。阴影的颜色。请参阅CSS颜色值。
                 */
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    1.圆形
    <div class="round"></div>
    2.圆角矩形
    <div class="rectangle"></div>
    3.任意规格的矩形
    <div class="free"></div>
    4.盒子的阴影
    <div class="shadow"></div>
    5.鼠标经过添加阴影
    <div class="shadow2"></div>
    6.文字阴影
    <h2 class="shadowtext">我是文字的阴影</h3>
    <br><br><br>
</body>

</html>